// Define a new component called todo-item
Vue.component("todo-item", {
  template: "<li>This is a todo</li>"
});
Vue.component("todo-item2", {
  // The todo-item component now accepts a
  // "prop", which is like a custom attribute.
  // This prop is called todo.
  props: ["todo"],
  template: "<li>- {{ todo.text }}</li>"
});
const app = new Vue({
  el: "#app",
  data: {
    groceryList: [
      {
        text: "Vegetables"
      },
      {
        text: "Cheese"
      },
      {
        text: "Whatever else humans are supposed to eat"
      }
    ]
  }
});
